<style>
    .title {
        margin-bottom: 24px;
    }
    .title p {
        width: 108px;
        font-size: 14px;
        padding-bottom: 5px;
        border-bottom: solid 2px #2d8cf0;
    }
</style>
<template>
    <div class="table">
        <div class="table-body">
            <Row>
                <Col span="7" offset="4">
                    <Form ref="exchange-config" :model="config" :label-width="140" label-position="right" :rules="rules">
                        <div class="title">
                            <p>可累计次数设置</p>
                        </div>
                        <FormItem label="学习视频" prop="video">
                            <Input v-model.number="config.video" placeholder="请输入学习视频可累计的次数"></Input>
                        </FormItem>
                        <FormItem label="学习文章" prop="article">
                            <Input v-model.number="config.article" placeholder="请输入学习文章可累计的次数"></Input>
                        </FormItem>
                        <FormItem label="参与游戏" prop="game">
                            <Input v-model.number="config.game" placeholder="请输入参与游戏可累计的次数"></Input>
                        </FormItem>
                        <FormItem label="参与天天赛" prop="test">
                            <Input v-model.number="config.test" placeholder="请输入参与天天赛可累计次数"></Input>
                        </FormItem>
                        <div class="title">
                            <p>兑换次数设置</p>
                        </div>
                        <FormItem label="激活兑换所需次数" prop="allow_count">
                            <Input v-model.number="config.allow_count" placeholder="请输入激活兑换所需累计次数"></Input>
                        </FormItem>
                        <!-- <div class="title">
                            <p>兑换额设置</p>
                        </div>
                        <FormItem label="每次可兑换流量值" prop="test">
                            <Input v-model.number="config.allow_count" placeholder="请输入每次兑换可兑换流量值"></Input>
                        </FormItem> -->
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('exchange-config')">确认</Button>
                            <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import http from '../../../libs/http';    
export default {
    data () {
        return {
            config: {
                video: '',
                article: '',
                game: '',
                test: '',
                allow_count: ''
            },
            rules: {
                video: [{ type:'number', required: true, message: '可累计的次数为空或格式错误', trigger: 'blur'}],
                article: [{ type:'number', required: true, message: '可累计的次数为空或格式错误', trigger: 'blur'}],
                game: [{ type:'number', required: true, message: '可累计的次数为空或格式错误', trigger: 'blur'}],
                test: [{ type:'number', required: true, message: '可累计的次数为空或格式错误', trigger: 'blur'}],
                allow_count:[{ type:'number', required: true, message: '所需累计次数为空或格式错误', trigger: 'blur'}],
            }
        }
    },
    methods: {
        getConfig () {
            var that = this;
            var url = 'admin/exchange/index';
            this.apiGet(url).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.config.video = parseInt(res.data.video);
                    that.config.article = parseInt(res.data.article);
                    that.config.game = parseInt(res.data.game);
                    that.config.test = parseInt(res.data.test);
                    that.config.allow_count = parseInt(res.data.allow_count);
                }
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    var data = {
                        ALLOW_EXCHANGE_COUNT: this.config.allow_count,
                        ARTICLE_EXCHANGE_COUNT: this.config.article,
                        GAME_EXCHANGE_COUNT: this.config.game,
                        TEST_EXCHANGE_COUNT: this.config.test,
                        VIDEO_EXCHANGE_COUNT: this.config.video
                    };
                    var url = "admin/exchange/update";
                    this.apiPost(url, data).then((res) => {
                        if (res.code != 200) {
                            this.handleError(res);
                        } else {
                            this.$Message.success('修改成功');
                            this.getConfig();
                        }
                    })         
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
    },
    created () {
        this.getConfig();
    },
    mixins: [http]
}
</script>